<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="../lib/element-ui.css" />
  <link href="../lib/mapbox-gl2.6.1.css" rel="stylesheet" />
  <script src="../lib/g2.min.js"></script>
  <script src="../lib/ecStat.min.js"></script>
  <script src="../conf.js"></script>
  <script src="../lib/kriging.js"></script>
  <script src="../lib/terraformer-1.0.12.min.js"></script>
  <script src="../lib/terraformer-wkt-parser-1.2.1.min.js"></script>
  <!-- <script src="../lib/mapbox-gl2.6.1.js"></script>
  <script src="../lib/jquery-3.6.0.min.js"></script>
  <script src="../lib/mapbox-gl-language.js"></script>
  <script src="../lib/dat.gui.min.js"></script>
  <script src="../lib/vue.js"></script>
  <script src="../lib/html2canvas.min.js"></script>
  <script src="../lib/echarts.min.js"></script>
  <script src="../lib/chroma.min.js"></script>
  <script src="../lib/element-ui.js"></script>
  <script src="../lib/d3.v5.min.js"></script>
  <script src="../lib/data-set.min.js"></script> -->
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #map {
      /* position: absolute; */
      /* top: 0; */
      /* bottom: 0; */
      width: 100%;
      /* height: 500px; */
      flex-grow: 1;
      position: relative;
    }

    .mapboxgl-canvas {
      /* position: relative !important; */
    }

    #app {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .marker {
      display: block;
      border: none;
      /* border-radius: 50%; */
      cursor: pointer;
      padding: 0;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    #maker::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    #maker {
      scrollbar-width: none;
      /* firefox */
      -ms-overflow-style: none;
      /* IE 10+ */
      overflow-x: hidden;
      overflow-y: auto;
    }

    .el-button+.el-button {
      margin-left: 3px;
    }

    .legendcontainer {
      /* background-color: #3e2723; */
      /* opacity: 0; */
      position: absolute;
      bottom: 5px;
      left: 5px;
      z-index: 10;
    }

    .legendpanel {
      display: inline-block;
      padding: 6px;
      background-color: white;
    }

    .legendpanelinner {
      padding: 3px;
      border-width: 2;
      border-style: solid;
    }

    .legendpanel+.legendpanel {
      margin-left: 3px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="top" style="height:auto">
      <el-button @click="savethememap" size="mini">保存</el-button>
      <!-- <el-button @click="$set(thememap.option, 'visiblechart', !thememap.option.visiblechart)" size="mini">统计图表</el-button> -->
      <el-button @click="visiblemaker=!visiblemaker" size="mini">图层配置</el-button>
    </div>
    <div id="main" style="display: flex; flex-direction: row; flex-grow: 1;position: relative;" v-loading="loading">
      <div id="map">
        <div style="
              background-color: #3e2723;
              opacity: 0.83;
              position: absolute;
              top: 10px;
              left: 10px;
              z-index: 10;
              padding: 10px 5px 5px 5px;
              border-radius: 3px;
            ">
          <span style="font-size: 30px; color: white">{{thememap.name}}</span>
        </div>
        <div class="legendcontainer">
          <div class="legendpanel" v-for="legend in legends">
            <div class="legendpanelinner">
              <div style="text-align: center;">
                图例
              </div>
              <div style="text-align: center;">
                {{(legend.unitname||'')}}
              </div>
              <div v-for="item in legend.items">
                <div style="">
                  <div style=" display: inline-block; width: 60px; opacity: 1 !important; ">
                    {{item.val}}
                  </div>
                  <div style="text-align: center;width: 50px;display: inline-block;">
                    <div :style="legenditemstyle(legend,item)">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="right" v-show="thememap.option.visiblechart == undefined ? false : thememap.option.visiblechart"
        style="height:100%;width: 400px;display: flex;flex-direction: column;position:absolute;right:0px;top:0px;z-index: 10;background-color: white;">
        <!-- <div id="chart1" style="min-height: 50px;flex-grow: 1;"></div>
        <div id="chart2" style="min-height: 50px;height: 50px;"></div>
        <div id="chart3" style="min-height: 50px;flex-grow: 1;"></div> -->
        <div id="chart1" style="height:42%;box-sizing: border-box;"></div>
        <div id="chart2" style="height:15%;box-sizing: border-box;"></div>
        <div id="chart3" style="height:42%;box-sizing: border-box;"></div>
      </div>
      <div id="maker" v-show="visiblemaker"
        style=" overflow: scroll; padding: 5px;width: 300px;border-radius: 3px; position:absolute;left:3px;top:3px;bottom:3px;z-index: 10;background-color: white;">
        <el-form label-width="80px">
          <el-form-item label="地图名称">
            <el-input size="mini" v-model="thememap.name"></el-input>
          </el-form-item>
          <el-form-item label="底图图源">
            <el-select size="mini" style="width: 100%;" v-model="thememap.option.basemap">
              <el-option v-for="(value,name) in basemaps" :value="name" :label="value.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="统计图表">
            <el-checkbox size="mini" v-model="thememap.option.visiblechart">
            </el-checkbox>
          </el-form-item>
          <div style="margin-bottom: 5px;">
            <el-button style="float: right;" type="primary" size="mini" @click="createmap(false)">生成地图</el-button>
            <el-button style="float: right;" type="primary" size="mini" @click="addlayer">添加图层</el-button>
            <div style="clear: both;"></div>
          </div>
          <fieldset v-for="(layer,idx) of thememap.option.layers">
            <el-button @click="addtheme(layer)" size="mini" icon="el-icon-plus">专题</el-button>
            <el-button @click="uplayer(idx)" size="mini" icon="el-icon-top"></el-button>
            <el-button @click="downlayer(idx)" size="mini" icon="el-icon-bottom"></el-button>
            <el-form-item :label="'图层'+idx">
              <el-col :span="18">
                <el-select style="width:100%;" size="mini" v-model="layer.level">
                  <el-option v-for="item in layerlevels" :value="item.value" :label="item.name"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-button icon="el-icon-delete" style="width:100%;" @click="dellayer(idx)" size="mini"></el-button>
              </el-col>

            </el-form-item>
            <el-form-item label="选择地区">
              <el-select clearable size="mini" v-model="layer.area">
                <el-option v-for="area in areas" :value="area.code" :label="area.name"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-button style="float: right;" @click="hidepanel(idx)" size="mini">折叠专题</el-button> -->
            <el-collapse>
              <el-collapse-item v-for="(theme,idxtheme) of layer.themes" :title="'专题-'+(themetypes[theme.type]??'')">
                <!-- <div :id="'panel'+idx" style=""> -->
                <!-- <fieldset> -->
                <!-- <el-button @click="hidetheme(idx,idxtheme)" size="mini">展开选项</el-button> -->
                <el-button @click="uptheme(idx,idxtheme)" icon="el-icon-top" size="mini"></el-button>
                <el-button @click="downtheme(idx,idxtheme)" icon="el-icon-bottom" size="mini"></el-button>

                <el-form-item label="专题类别">
                  <el-col :span="18">
                    <el-select size="mini" v-model="theme.type" style="width: 100%;"
                      @change="theme = thememetas.find(t=>t.type==theme.type)">
                      <el-option v-for="(name,type) in themetypes" :label="name" :value="type"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-button @click="deltheme(layer,idxtheme)" size="mini" style="width: 100%;" icon="el-icon-delete">
                    </el-button>
                  </el-col>
                </el-form-item>
                <div :id="'panel'+idx+'-'+idxtheme">
                  <el-form-item v-if="propthemes.field.includes(theme.type)" label="综合指标">
                    <el-select size="mini" v-model="theme.field" filterable>
                      <el-option v-for="opt in fieldsdict" :value="opt.colname" :label="opt.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="propthemes.fields.includes(theme.type)" label="图表指标">
                    <el-select size="mini" multiple v-model="theme.fields" filterable>
                      <el-option v-for="opt in fieldsdict" :value="opt.colname" :label="opt.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="propthemes.size.includes(theme.type)" label="字体大小">
                    <el-input-number :min="1" :max="30" size="mini" v-model.number="theme.size"
                      @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.overlap.includes(theme.type)" label="允许重叠">
                    <el-checkbox size="mini" v-model="theme.overlap" @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-checkbox>
                  </el-form-item>

                  <el-form-item v-if="propthemes.width.includes(theme.type)" label="线宽">
                    <el-input-number :min="1" :max="10" size="mini" v-model.number="theme.width"
                      @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-input-number>
                  </el-form-item>

                  <el-form-item v-if="propthemes.opacity.includes(theme.type)" label="透明度">
                    <el-input-number :min="0.1" :max="1" size="mini" :step="0.1" v-model.number="theme.opacity"
                      @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.opacitygradient.includes(theme.type)" label="透明渐变">
                    <el-checkbox size="mini" v-model="theme.opacitygradient"
                      @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-checkbox>
                  </el-form-item>

                  <el-form-item v-if="propthemes.highlight.includes(theme.type)" label="是否高亮">
                    <el-checkbox size="mini" v-model="theme.highlight">
                    </el-checkbox>
                  </el-form-item>
                  <el-form-item v-if="propthemes.color.includes(theme.type)" label="颜色">
                    <el-color-picker size="mini" v-model="theme.color" @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-color-picker>
                  </el-form-item>
                  <el-form-item v-if="propthemes.colorlevels.includes(theme.type)" label="分级数">
                    <el-input-number :min="3" :max="20" size="mini" v-model.number="theme.colorlevels"
                      @change="updatetheme(layer,idx,theme,idxtheme)">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.colorgradient.includes(theme.type)" label="分级颜色">
                    <el-color-picker v-for="(color,idxcolor) of theme.colorgradient" size="mini"
                      @change="updatetheme(layer,idx,theme,idxtheme)" v-model="theme.colorgradient[idxcolor]">
                    </el-color-picker>
                    <el-button size="mini" icon="el-icon-plus" @click="addcolor(theme.colorgradient)"
                      style="vertical-align:middle;padding:3px 5px;">
                    </el-button>
                    <el-button size="mini" icon="el-icon-minus"
                      @click="theme.colorgradient.splice(theme.colorgradient.length-1,1);"
                      style="vertical-align:middle;margin-left:0px;padding:3px 5px;">
                    </el-button>
                  </el-form-item>
                  <el-form-item v-if="propthemes.palette.includes(theme.type)" label="分色模板">
                    <el-select size="mini" v-model="theme.palette" @change="updatetheme(layer,idx,theme,idxtheme)">
                      <el-option v-for="(item,i) in colorpats" :value="item" :label="'模板'+i"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="propthemes.quantile.includes(theme.type)" label="分位分段">
                    <el-checkbox size="mini" v-model="theme.quantile"></el-checkbox>
                  </el-form-item>
                  <el-form-item v-if="propthemes.density.includes(theme.type)" label="计算密度">
                    <el-checkbox size="mini" v-model="theme.density"></el-checkbox>
                  </el-form-item>
                  <el-form-item v-if="propthemes.fill.includes(theme.type)" label="填充底色">
                    <el-checkbox size="mini" v-model="theme.fill"></el-checkbox>
                  </el-form-item>
                  <el-form-item v-if="propthemes.legend.includes(theme.type)" label="生成图例">
                    <el-checkbox size="mini" v-model="theme.legend.show"></el-checkbox>
                  </el-form-item>
                  <el-form-item v-if="propthemes.legend.includes(theme.type)" label="计算单位">
                    <el-input size="mini" v-model="theme.legend.calcunit"></el-input>
                  </el-form-item>
                  <el-form-item v-if="propthemes.legend.includes(theme.type)" label="单位名称">
                    <el-input size="mini" v-model="theme.legend.unitname"></el-input>
                  </el-form-item>
                  <el-form-item v-if="propthemes.blur.includes(theme.type)" label="线模糊">
                    <el-input-number :min="0" :max="100" size="mini" v-model.number="theme.blur"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.halowidth.includes(theme.type)" label="光环宽度">
                    <el-input-number :min="0" :max="100" size="mini" v-model.number="theme.halowidth"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.halocolor.includes(theme.type)" label="光环颜色">
                    <el-color-picker size="mini" v-model="theme.halocolor"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-color-picker>
                  </el-form-item>
                  <el-form-item v-if="propthemes.minsize.includes(theme.type)" label="最小半径">
                    <el-input-number :min="1" :max="100" size="mini" v-model.number="theme.minsize"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.maxsize.includes(theme.type)" label="最大半径">
                    <el-input-number :min="1" :max="300" size="mini" v-model.number="theme.maxsize"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.weight.includes(theme.type)" label="权重">
                    <el-input-number :min="0" :max="2" :step="0.1" size="mini" v-model.number="theme.weight"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.intensity.includes(theme.type)" label="强度">
                    <el-input-number :min="0" :max="20" :step="0.2" size="mini" v-model.number="theme.intensity"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.radius.includes(theme.type)" label="半径">
                    <el-input-number :min="0" :max="50" size="mini" v-model.number="theme.radius"
                      @change="updatetheme(layer,idx,theme,idxtheme)"></el-input-number>
                  </el-form-item>
                  <el-form-item v-if="propthemes.gridsize.includes(theme.type)" label="网格宽度">
                    <el-input-number :min="1" :max="100" size="mini" v-model.number="theme.gridsize" @change="">
                    </el-input-number>
                  </el-form-item>
                  <el-button v-if="propthemes.btn.includes(theme.type)" @click="gridcalc(layer,idx,theme,idxtheme)">网格计算</el-button>
                  <el-form-item v-if="propthemes.chartype.includes(theme.type)" label="图表类型">
                    <el-select size="mini" v-model="theme.chartype">
                      <el-option v-for="(value, name) in chartypes" :value="name" :label="value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="propthemes.pure.includes(theme.type)" label="净流动">
                    <el-checkbox size="mini" v-model="theme.pure"></el-checkbox>
                  </el-form-item>
                  <el-form-item v-if="propthemes.direction.includes(theme.type)" label="流动类型">
                    <el-select size="mini" v-model="theme.direction">
                      <el-option value="in" label="流入"></el-option>
                      <el-option value="out" label="流出"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="propthemes.areacode.includes(theme.type)" label="地区">
                    <el-select size="mini" v-model="theme.areacode">
                      <el-option v-for="area in areas" :value="area.code" :label="area.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="propthemes.maxsize.includes(theme.type)" label="选择符号">
                    <el-select size="mini" v-model="theme.image">
                      <el-option value="儿童"></el-option>
                      <el-option value="老人"></el-option>
                      <el-option value="住房"></el-option>
                    </el-select>
                  </el-form-item>

                </div>
                <!-- </fieldset> -->
              </el-collapse-item>
            </el-collapse>
          </fieldset>
        </el-form>
      </div>
    </div>

  </div>
  <script src="thememap_editor.js" type="module"></script>
</body>

</html>